import { PosGetInFeeOutput, PosGetInOutput } from 'api/pos';
import { InfoLayout, ShortBar, TradeDetailItem } from 'components';
import { PosModule } from 'native-modules';
import React, { useEffect, useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { NavigationStackScreenComponent } from 'react-navigation-stack';
import { getAuthorization, operate } from 'services/authorization';
import { commonStyle } from 'styles';

import { tradeDetailStyle } from './styles';

const TradeDetailScreen: NavigationStackScreenComponent<{ posGetin: PosGetInOutput }> = props => {
	const [posAppGetin, setPosAppGetin] = useState<PosGetInOutput>({})
	useEffect(() => {
		setPosAppGetin(props.navigation.getParam('posGetin'))
	}, [])
	const selectFee = () => {
		props.navigation.navigate('ChangeFee', {
			posAppGetin: posAppGetin.posGetIn
		})
	}
	let ylFlag = false
	return (
		<ScrollView>
			{console.log('111', posAppGetin)}
			{
				posAppGetin.posGetIn ? <View style={[commonStyle.containerColumn, tradeDetailStyle.container]}>
					<ShortBar style={tradeDetailStyle.titleContainer} title={posAppGetin.posGetIn.billNo} />
					<InfoLayout title="客户:" content={posAppGetin.allCustomerName} />
					<InfoLayout title="实收金额:" content={`${posAppGetin.posGetIn.amount}元`} />
					<TradeDetailItem showBank={true} hideDivier={true} posGetin={posAppGetin} />
					<View style={tradeDetailStyle.empty} />
					<ShortBar style={tradeDetailStyle.titleContainer} title={getAuthorization().project.name} />
					<Text style={{ ...tradeDetailStyle.door, ...commonStyle.roomStyle }}>{posAppGetin.posGetInFees && posAppGetin.posGetInFees.length > 0 && posAppGetin.posGetInFees[0].roomInfo}</Text>
					{
						posAppGetin.posGetInFees && posAppGetin.posGetInFees.map((posGetInFee: PosGetInFeeOutput) => {
							return <InfoLayout key={posGetInFee.id} title={`${posGetInFee.fundName}:`} content={`${posGetInFee.amount}元`} />
						})
					}

					{/* <InfoLayout title="首期:" content="89080.00元" /> */}

					<View style={[commonStyle.containerRow, tradeDetailStyle.btnContainer]}>
						<TouchableOpacity
							style={[commonStyle.ringButton, tradeDetailStyle.btn]}
							onPress={() => {
								if (ylFlag) return
								ylFlag = true
								PosModule.rePrint(posAppGetin.posGetIn.traceNo).finally(() => { ylFlag = false })
							}}>
							<Text style={tradeDetailStyle.btnContent}>重打小票</Text>
						</TouchableOpacity>
						<TouchableOpacity
							style={[commonStyle.ringButton, tradeDetailStyle.btn]}
							onPress={() => { operate(); selectFee() }}>
							<Text style={tradeDetailStyle.btnContent}>打印收据</Text>
						</TouchableOpacity>
					</View>
				</View> : null
			}

		</ScrollView>
	)
}

TradeDetailScreen.navigationOptions = props => {
	return {
		title: '交易明细',
	}
}

export default TradeDetailScreen
